<template>
  <div class="date-picker">
    <div v-show="inputValue" class="date_content">
      <div class="date-picker-wrap">
        <i class="el-icon-date"/>
        <input :value="inputValue" type="text" class="inputDate" readonly="readonly">
      </div>
      <el-button class="btn el-icon-close" @click.native.prevent="resetDate"/>
    </div>
    <div class="date_btn">
      <el-button class="btn el-icon-date"/>
      <el-date-picker
        v-model="value"
        :picker-options="pickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="chooseTimeRange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  data() {
    return {
      value: '',
      inputValue: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate: (time) => {
          return this.dealDisabledDate(time)
        }
      }
    }
  },
  methods: {
    dealDisabledDate(time) {
      var times = Date.now()
      return time.getTime() > times
    },
    chooseTimeRange() {
      this.inputValue = this.value[0] + '至' + this.value[1]
    },
    resetDate() {
      this.inputValue = ''
      this.value = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.date-picker{
  display: inline-block;
  .date_content{
    display: inline-block;
    .date-picker-wrap{
      display: inline-block;
      vertical-align: top;
      position: relative;
      cursor: pointer;
      font-size: 13px;
      background: rgba(85,159,240,.16);
      color: #475669;
      border-radius: 3px;
      .el-icon-date{
        color: #97A7BD;
        position: absolute;
        top: 10px;
        left: 8px;
        font-size:18px;
      }
      .inputDate{
        width:200px;
        height:36px;
        padding-left: 32px;
        border: 0;
        outline: 0 none;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
      }
    }
    .el-icon-close{
      font-size: 20px;
      border: 1px solid transparent;
      background: transparent;
    }
  }
  .date_btn{
    width: 42px;
    height: 36px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    .el-date-editor{
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      opacity:0;
    }
  }
}
</style>
